<template>
  <div class="detailpannel">
    <div>
      <div v-if="status=='node-selected'" class="pannel" id="node_detailpannel">
        <div class="pannel-title">模型详情</div>
        <div class="block-container">
          <el-row :gutter="10">
            <el-col :span="8">名称</el-col>
            <el-col :span="16">
              <el-input v-model="node.label" @change="handleChangeName" />
            </el-col>
            <el-col :span="8">任意属性</el-col>
            <el-col :span="16">
              <el-input v-model="node.xxx" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="status=='edge-selected'" class="pannel" id="edge_detailpannel">
        <div class="pannel-title">模型详情</div>
        <div class="block-container">
          <el-row :gutter="10">
            <el-col :span="8">左边表</el-col>
            <el-col :span="16">
              <el-input v-model="node.sourceId" @change="handleChangeProperties" />
            </el-col>
            <el-col :span="8">右边表</el-col>
            <el-col :span="16">
              <el-input v-model="node.targetId" @change="handleChangeProperties" />
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="status==='canvas-selected'" class="pannel" id="canvas_detailpannel">
        <div class="pannel-title">画布</div>
        <div class="block-container">
          <el-checkbox v-model="showGrid" @change="changeGridState">网格对齐</el-checkbox>
        </div>
      </div>
      <!-- <div v-if="status==='group-selected'" class="pannel" id="node_detailpannel">
        <div class="pannel-title">群组详情</div>
        <div class="block-container">
          <div class="p">
            名称：
            <el-input v-model="name" />
          </div>
          <div class="p">
            任意属性：
            <el-input v-model="color" />
          </div>
        </div>
      </div>
      -->
    </div>
    <el-dialog title="模型配置" :visible.sync="dialogFormVisible" append-to-body	>
      <el-form >
        <el-form-item label="关联方式" >
          <el-select v-model="extProps.join" placeholder="请选择关联方式">
            <el-option label="left join" value="left join"></el-option>
            <el-option label="inner join" value="inner join"></el-option>
            <el-option label="full join" value="full join"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="" >
          <el-row :gutter="12">
            <el-col :span="4" :offset="2">
              <span >{{ extProps.sourceNode.label }}</span>
            </el-col>
            <el-col :span="4" :offset="2">
              <span >{{ extProps.targetNode.label }}</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" v-for="count in line" :key="count">
          <el-row :gutter="12">
            <el-col :span="4" :offset="2">
              <el-select v-model="sourceColumn[count-1]" placeholder="请选择关联字段">
                <el-option label="日期" value="date"></el-option>
                <el-option label="来源" value="source"></el-option>
                <el-option label="地区" value="place"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2"><span>=</span></el-col>
            <el-col :span="4" >
              <el-select v-model="targetColumn[count-1]" placeholder="请选择关联字段">
                <el-option label="目标日期" value="date"></el-option>
                <el-option label="目标来源" value="source"></el-option>
                <el-option label="目标地区" value="place"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1" :offset="1">
              <el-button type="primary" icon="el-icon-plus" @click="addLine"></el-button>
            </el-col>
            <el-col :span="1" :offset="1">
              <el-button type="primary" icon="el-icon-minus" @click="removeLine(count)"></el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveJoin">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
import Grid from "@antv/g6/build/grid";
export default {
  data() {
    return {
      status: "canvas-selected",
      showGrid: false,
      page: {},
      graph: {},
      item: {},
      node: {},
      grid: null,
      dialogFormVisible: false,
      form:{},
      extProps: {},
      line: 1,
      sourceColumn: [],
      targetColumn: []
    };
  },
  created() {
    this.init();
    this.bindEvent();
  },
  methods: {
    init() {},
    bindEvent() {
      let self = this;
      eventBus.$on("afterAddPage", page => {
        self.page = page;
        self.graph = self.page.graph;
        eventBus.$on("nodeselectchange", item => {
          if (item.select === true) {
            window.console.log('type = '+item.target.getType())
            if(item.target.getType() === "node"){
              self.status = "node-selected";
              self.item = item.target;
              self.node = item.target.getModel();
            }else if(item.target.getType() === 'edge'){
              self.status = "edge-selected";
              self.item = item.target;
              self.node = item.target.getModel();
              self.extProps.targetNode = item.target._cfg.target.getModel()
              self.extProps.sourceNode = item.target._cfg.source.getModel()
              self.dialogFormVisible = true
              // self.node.sourceId = item.target.getModel().sourceId;
              // self.node.targetId = item.target.getModel().targetId;
              //self.node = item.target.getModel();
            }
          } else {
            self.status = "canvas-selected";
            self.item = null;
            self.node = null;
          }
        });
      });
    },
    handleChangeName(e) {
      const model = {
        label: e
      };

      this.graph.update(this.item, model);
    },
    handleChangeProperties(e){
      const model = {
        extProps: e
      };
      this.graph.update(this.item, model);
    },
    changeGridState(value) {
      if (value) {
        this.grid = new Grid();
        this.graph.addPlugin(this.grid);
      } else {
        this.graph.removePlugin(this.grid);
      }
    },
    addLine(){
      this.line +=1
    },
    removeLine(count){
      this.line -=1
      this.sourceColumn.splice(count-1,1);
      this.targetColumn.splice(count-1,1);
    },
    saveJoin(){ //保存关联关系
      let joinStr = this.extProps.sourceNode.id +' '+ this.extProps.sourceNode.id 
        +' '+this.extProps.join+' '+this.extProps.targetNode.id +' '+ this.extProps.targetNode.id 
        +' on ';
        for(var i = 0;i<this.sourceColumn.length;i++){
          joinStr += this.extProps.sourceNode.id + '.'
            +this.sourceColumn[i]+"="+this.extProps.targetNode.id +'.'+this.targetColumn[i] ;
            if(i != this.sourceColumn.length-1){
              joinStr +=' and '
            }
        }
        this.extProps.joinStr = joinStr
        const model = {
          extProps: this.extProps
        };
        this.graph.update(this.item, model);
        this.dialogFormVisible = false
    }
  }
};
</script>

<style scoped>
.detailpannel {
  height: 90%;
  position: absolute;
  right: 0px;
  z-index: 2;
  background: #f7f9fb;
  width: 200px;
  border-left: 1px solid #e6e9ed;
}
.detailpannel .block-container {
  padding: 16px 8px;
}
.block-container .el-col {
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
</style>
